<template>
  <div class="risk-treatment-rules-page">
    <!-- 主要内容区域 -->
    <el-scrollbar class="main-side shadow">
      <!-- 查询条件 -->
      <Search position="horizontal" :is-pack="true" :is-operate="false" :is-show="isShowMore"
              @search="doSearch" @clear="doReset" @show="showMoreFn"
      >
        <search-item :col-width="262">
          <template slot="label">
            规则名称
          </template>
          <template slot="content">
            <el-input v-model="queryForm.ruleName" placeholder="请输入" clearable />
          </template>
        </search-item>
        <search-item :col-width="262">
          <template slot="label">
            规则状态
          </template>
          <template slot="content">
            <el-select v-model="queryForm.status" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </search-item>
        <search-item :col-width="262">
          <template slot="label">
            车牌号
          </template>
          <template slot="content">
            <el-input v-model="queryForm.carNo" placeholder="请输入" clearable />
          </template>
        </search-item>
        <search-item :col-width="262" v-if="isShowMore">
          <template slot="label">
            发生时间
          </template>
          <template slot="content">
            <el-date-picker
              v-model="queryForm.createTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            />
          </template>
        </search-item>
        <search-item :col-width="262" v-if="isShowMore">
          <template slot="label">
            创建人
          </template>
          <template slot="content">
            <el-input v-model="queryForm.creater" placeholder="请输入" clearable />
          </template>
        </search-item>
        <search-item :col-width="262" v-if="isShowMore">
          <template slot="label">
            更新人
          </template>
          <template slot="content">
            <el-input v-model="queryForm.updater" placeholder="请输入" clearable />
          </template>
        </search-item>
      </Search>

      <div class="bg-white pt10 mt10">
        <div class="mb10">
          <div class="flex flex-j-end  flex-vc">
            <el-button class="mr10" type="primary" size="medium" @click="handleAdd">
              新增规则
            </el-button>
          </div>
        </div>
        <el-table
          :data="tableData"
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column
            prop="ruleName"
            label="规则名称"
            min-width="100"
          >
            <template slot-scope="scope">
              <span class="ruleName" @click="handleEdit(scope.row,'detail')">{{ scope.row.ruleName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cars"
            label="应用车辆数"
            min-width="100"
          />
          <el-table-column
            prop="events"
            label="风险事件数"
            min-width="100"
          />
          <el-table-column
            prop="ruleStatus"
            label="规则状态"
            min-width="100"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="100"
          />
          <el-table-column
            prop="creater"
            label="创建人"
            min-width="100"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="100"
          />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            min-width="100"
          />
          <el-table-column
            prop="updater"
            label="更新人"
            min-width="100"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="145"
          >
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small" style="padding: 0;">
                修改
              </el-button>
              <el-button @click="handleDelete(scope.row)" type="text" size="small" style="color: red;">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <pagination v-show="total>0" 
                  :total="total" 
                  :page.sync="pageInfo.page" 
                  :limit.sync="pageInfo.limit"
                  @pagination="getList"
      />
    </el-scrollbar>

    <AddEditDialog ref="addEdit" @refresh="refreshList"/>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import AddEditDialog from './components/AddEditDialog.vue'

  export default {
    components: {
      Pagination,
      AddEditDialog
    },
    created() {
      this.tableData.push({id:Date.now(),ruleName:'测试规则',cars:1,events:2,ruleStatus:'启用',creater:'admin',createTime:'2020-10-10',updater:'admin',updateTime:'2020-10-10'})
      this.getList()
    },
    data() {
      return {
        tableData: [],
        statusList: [],
        pageInfo: {
          page: 1,
          limit: 20
        },
        total: 0,
        isShowMore: false,
        queryForm: {
          updater: "",
          creater: "",
          createTime: "",
          carNo: "",
          ruleStatus: "",
          ruleName: "",
        }
      };
    },
    methods: {
      refreshList(form) {
        this.tableData.push({id:Date.now(),ruleName: form.ruleName,ruleStatus:'启用',creater:'admin',createTime:'2020-10-10',updater:'admin',updateTime:'2020-10-10'})
        this.total = this.tableData.length
      },
      handleAdd() {
        this.$refs.addEdit.showDialog()
      },
      handleDelete(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(
          () => {
            this.tableData = this.tableData.filter(item => item.id !== row.id)
            this.total = this.tableData.length
            this.$message.success('删除成功')
          }).catch(() => {})
      },
      handleEdit(row,sign) {
        this.$refs.addEdit.showDialog(row,sign)
      },
      doReset() {
        this.queryForm = this.$options.data().queryForm
      },
      showMoreFn() {
        this.isShowMore = !this.isShowMore
      },
      getList() {
        this.total = this.tableData.length
      },
      doSearch() {
        this.getList()
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .risk-treatment-rules-page {
    display: flex;
    padding: 10px;
    height: calc(100vh - 50px);

    .main-side {
      flex: 1;
      height: 100%;
    }

    ::v-deep.el-button--small {
      padding: 0;
    }

    .ruleName {
      color: $theme;
      cursor: pointer;
    }
  }
</style>
